<template>
    <el-form ref="formObj" :model="regform" :rules="rules" style="margin-top: 50px;padding: 0 30px ; max-width: 600px;">
        <el-form-item prop="name">
            <el-input maxlength="20" :prefix-icon="User" v-model="regform.name" placeholder="请输入姓名" size="large"></el-input>
        </el-form-item>
        <el-form-item prop="phone">
            <el-input maxlength="15" :prefix-icon="Iphone" v-model="regform.phone" placeholder="请输入手机号" size="large"></el-input>
        </el-form-item>
        <el-form-item prop="email">
            <el-input maxlength="64" :prefix-icon="Message" v-model="regform.email" placeholder="请输入电子邮箱" size="large"></el-input>
        </el-form-item>
        <el-form-item prop="code">
            <el-input maxlength="6" :prefix-icon="ChatDotSquare" v-model="regform.code"
                style="width: 225px; margin-right: 10px;" placeholder="请输入验证码" @click="send" size="large"></el-input>
            <el-button :disabled="isCountingDown" type="primary" plain @click="sendCode" style="width: 100px;" size="large">
                {{ isCountingDown ? `${countdown}s后再发送` : '发送验证码' }}
            </el-button>
        </el-form-item>
        <el-form-item prop="password">
            <el-input :prefix-icon="Lock" v-model="regform.password" placeholder="请输入密码" show-password size="large"></el-input>
        </el-form-item>
        <el-form-item prop="repass">
            <el-input :prefix-icon="Check" v-model="regform.repass" placeholder="请确认密码" show-password size="large"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button style="width: 150px;" plain type="primary" @click="$router.push('/')" size="large">返回登录</el-button>
            <el-button style="width: 150px;position: absolute; right: 0;" plain type="primary"
                @click="register" size="large">注册</el-button>
        </el-form-item>
    </el-form>
</template>

<script setup>
import { User,Iphone,Message,Lock,Check,ChatDotSquare } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { ref,reactive } from 'vue'
import { get,post } from '@/axios'
import { _axios } from '@/axios'
import router from '@/router'
const regform=reactive({
	name:'',
	phone:'',
	email:'',
	code:'',
	password:'',
	repass:'',
})
const formObj = ref()
function check (rule, value, callback) {
	get("/umsAdmin/check",{id:null,value,field: rule.field },content => {
		if(content){
			callback()
		}else{
			callback(new Error())
		}
	})
}
const rules = reactive({
	name:[
		{ required:true, message: '请输入姓名', trigger:'blur' }
	],
	phone:[
		{ required:true, message: '请输入手机号', trigger:'blur' },
		{ pattern: /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/, message: '请输入正确的中国手机号', trigger: 'blur' },
		{ validator: check, message: '该手机号已经被使用', trigger: 'blur' }
	],
	email:[
		{ required:true, message: '请输入电子邮箱', trigger:'blur' },
		{ type: 'email', message: '请输入正确的电子邮箱', trigger: 'blur' },
		{ validator: check, message: '该电子邮箱已经被使用', trigger: 'blur' }
	],
	code:[
		{ required:true, message: '请输入验证码', trigger:'blur' }
	],
	password:[
		{ required:true, message: '请输入密码', trigger:'blur' }
	],
	repass:[
		{ required:true, message: '请再次输入密码', trigger:'blur' }
	],
})

const countdown = ref(60)  // 倒计时秒数
const isCountingDown = ref(false)  // 是否正在倒计时
function sendCode () {
	formObj.value.validateField(['name', 'phone', 'email'],valid => {
		if(valid){
			post("/umsAdmin/sendCode",{email:regform.email},content => {
				ElMessage({
					message:'验证码已发送',
					type:'success'
				})
				startCountdown()
			})
		}else{
			ElMessage({
				message:'验证失败，请检查个人信息',
				type:'error'
			})
		}
	})
}
function startCountdown() {
	isCountingDown.value = true
	countdown.value = 60
	const timer = setInterval(() => {
		countdown.value -= 1
		if(countdown.value <= 0){
			clearInterval(timer)
			isCountingDown.value = false
		}
	},1000)
}
function register(){
	formObj.value.validate(valid => {
		if(valid){
			post('/umsAdmin/checkCode',{ email:regform.email,code:regform.code },content => {
				if(content){
					if(regform.password === regform.repass){
						const formData = new FormData()
						for(const key in regform){
							if(key !== "code" && key !== "repass" ){
								formData.append(key,regform[key])
							}
						}
						_axios.request({
							url: '/umsAdmin/register',
							method: 'post',
							data: formData
						}).then(response => {
							ElMessage({
								message:'注册成功',
								type:'success'
							})
							router.push({
								path:'/'
							})
						})
					}else{
						ElMessage({
							message:'两次密码输入必须一致',
							type:'error'
						})
					}
				}else{
					ElMessage({
						message:'验证码输入错误',
						type:'error'
					})
				}
			})
		}else{
			ElMessage({
				message:'注册失败，请检查个人信息',
				type:'error'
			})
		}
	})
}
</script>

<style scoped lang="scss">
.title {
    text-align: center;
    margin-top: 20px;
    letter-spacing: 1.5rem;
    color: #fff;
}
</style>
